{"componentChunkName":"component---src-templates-blog-post-js","path":"/Today I Learned/Parent_element에_click이_발생할_때_Child_element의_클릭이벤트를_제어하기/","result":{"data":{"site":{"siteMetadata":{"title":"JULog","author":"[Ju Chan Hwang]","siteUrl":"https://julog.netlify.app","comment":{"disqusShortName":"","utterances":"JuChanHwang/gatsby-starter-bee"},"sponsor":{"buyMeACoffeeId":"jbee"}}},"markdownRemark":{"id":"f0996981-15bf-5e72-835f-108261e81892","excerpt":"ISSUE 버튼을 클릭했을 때 모달이 열리는 이슈 아이템 전체 요소에 event를 걸어서 자식 요소를 클릭했을 때도 event가 발생하는 원인 해결 방안 click event를 인자로 넘겨준다. 문의 버튼 element를 ViewChild로 받아서 ts에서 제어한다. element에 event.target이 포함(contains()) 되어있지 않으면 모달을 열어준다. HTML TS","html":"

ISSUE

\n\n\n

해결 방안

\n\n
\n

HTML

\n
\n
<div class=\"item-container\" (click)=\"openModal($event)\">\n  ......\n  <a #telEl [href]=\"'tel:'+lesson.phoneNumber[0]\">\n    <si icon=\"phone-alt-solid\"></si>\n    <span>문의</span>\n  </a>\n  ......\n</div>
\n
\n

TS

\n
\n
@ViewChild('telEl') telEl: ElementRef;\n\nopenModal(event) {\n  if (!this.telEl.nativeElement.contains(event.target)) {\n    this.bsModalService.show(MobileAcademyItemModalComponent, {\n      initialState: { lesson: this.lesson }\n    })\n  }\n}
","frontmatter":{"title":"Parent element에 click이 발생할 때 child element의 클릭이벤트를 제어하기","date":"July 03, 2020"}}},"pageContext":{"slug":"/Today I Learned/Parent_element에_click이_발생할_때_Child_element의_클릭이벤트를_제어하기/","previous":{"fields":{"slug":"/Today I Learned/mobile_touch_swipe_indicator/"},"frontmatter":{"title":"Mobile Touch Swipe Indicator","category":"Today I Learned","draft":false}},"next":{"fields":{"slug":"/development/quick_start/"},"frontmatter":{"title":"Quick Start","category":"development","draft":false}}}},"staticQueryHashes":["3128451518","96099027"]}